"use strict";
import React, {
  useState,
  useEffect,
  forwardRef,
  useImperativeHandle,
} from "react";
import { Space } from "antd";
import { CaretUpOutlined, CaretDownOutlined } from "@ant-design/icons";
import styles from "./index.less";

/*
 * 组件注释
 * create by wuqiong
 * creation time 2022/05/09
 * tag排序
 * */
/* dataSource={[
  {
    title: "发布时间",
    key: "assetPublishTime",
  },
]} */
/**
 * multiple 是否多选
 */
const Index = forwardRef((props, ref) => {
  const { dataSource = [], multiple = false, onChange } = props;
  const [selectkeys, setSelectkeys] = useState([]);
  const sort = key => {
    let current;
    let allData;
    if (multiple) {
      const idx = selectkeys.findIndex(item => item.sortField === key);

      if (idx > -1) {
        const sortType =
          selectkeys[idx].sortType + 1 > 2 ? 0 : selectkeys[idx].sortType + 1;
        selectkeys[idx].sortType = sortType;
        if (!sortType) {
          current = selectkeys.splice(idx, 1);
        } else {
          current = selectkeys[idx];
        }
        allData = JSON.parse(JSON.stringify(selectkeys));
      } else {
        current = {
          sortField: key,
          sortType: 1,
        };
        allData = [...selectkeys, current];
      }
    } else {
      if (selectkeys.length && selectkeys[0].sortField === key) {
        const sortType =
          selectkeys[0].sortType + 1 > 2 ? 0 : selectkeys[0].sortType + 1;
        current = {
          sortField: key,
          sortType: sortType,
        };
        allData = [current];
      } else {
        current = {
          sortField: key,
          sortType: 1,
        };
        current = allData = [current];
      }
    }

    setSelectkeys(allData);

    const _allData = JSON.parse(JSON.stringify(allData));
    const _current = JSON.parse(JSON.stringify(current));
    if (multiple) {
      onChange?.(_allData, _current);
    } else {
      onChange?.(_allData[0]);
    }
  };

  const isSort = (key, type) => {
    const record = selectkeys.find(item => item.sortField === key);
    return record?.sortType === type;
  };

  useEffect(() => () => setSelectkeys([]), []);

  useImperativeHandle(ref, () => ({
    selectkeys,
    setSelectkeys,
    sort,
  }));

  return (
    <Space className={`${styles.orderFieldList} orderFieldList`}>
      {dataSource.map(item => {
        return (
          <span
            key={item.key}
            className={`${styles.btn} btn`}
            onClick={() => sort(item.key)}>
            {item.title}
            <span className={`${styles.sort_icon_parent} sort_icon_parent`}>
              <span
                className={`${styles.top_icon} ${
                  isSort(item.key, 1) ? styles.active : null
                } top_icon`}>
                <CaretUpOutlined />
              </span>
              <span
                className={`${styles.down_icon} ${
                  isSort(item.key, 2) ? styles.active : null
                } down_icon`}>
                <CaretDownOutlined />
              </span>
            </span>
          </span>
        );
      })}
    </Space>
  );
});
export default Index;
